feat(ui): add input to filter package versions by any semver range#1405
feat(ui): add input to filter package versions by any semver range#1405
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
serhalp
force-pushed
the
feat/filter-pkg-versions-by-semver
branch
from
941feba to
dd0628a
Compare
Add a text input to the versions section that filters displayed versions by any valid npm semver range (e.g. `^3.0.0`, `>=2.0.0 <3.0.0`, `~1.5.0`). It filters tag rows, expanded child versions, and "other versions" groups as-you-type. It shows an indication when the input is not a valid range, and a "no matches" message when nothing matches. It has a tooltip linking to a new docs page explaining npm semver ranges
serhalp
force-pushed
the
feat/filter-pkg-versions-by-semver
branch
from
dd0628a to
e6c0d1d
Compare
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThis pull request introduces semver range filtering for package versions. A new Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
test/nuxt/components/PackageVersions.spec.ts (1)
894-907:⚠️ Potential issue | 🟠 MajorDrop the focus-visible class assertion — it will always fail.
The component doesn’t set a
focus-visibleclass; focus styles are applied globally, so this check is brittle and will break CI.Suggested fix
- it('expand buttons have visible focus states', async () => { - const component = await mountSuspended(PackageVersions, { - props: { - packageName: 'test-package', - versions: { - '1.0.0': createVersion('1.0.0'), - }, - distTags: { latest: '1.0.0' }, - time: { '1.0.0': '2024-01-15T12:00:00.000Z' }, - }, - }) - - const expandButton = component.find('button[aria-expanded]') - expect(expandButton.classes().some(c => c.includes('focus-visible'))).toBe(true) - })Based on learnings: “In the npmx.dev project, ensure that focus-visible styling for button and select elements is implemented globally in app/assets/main.css … Do not apply per-element inline utility classes … rely on the global rule.”
app/components/Package/Versions.vue (1)
655-663:⚠️ Potential issue | 🟡 MinorUse colon icon syntax for UnoCSS preset-icons.
i-carbon-warning-hexshould bei-carbon:warning-hexto match the project's icon convention used throughout the file and codebase.Suggested fix
- :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined" + :classicon="v.deprecated ? 'i-carbon:warning-hex' : undefined"Note: There are 6 occurrences of this pattern in the file that should all be updated.
| // Whether the filter is active but nothing matches anywhere | ||
| const hasNoFilterMatches = computed(() => { | ||
| if (!isFilterActive.value) return false | ||
| return ( | ||
| visibleTagRows.value.length === 0 && | ||
| hiddenTagRows.value.length === 0 && | ||
| filteredOtherMajorGroups.value.length === 0 | ||
| ) |
There was a problem hiding this comment.
Avoid showing “No versions match” when the range is invalid.
Right now an invalid range triggers both the error message and the no‑matches banner, which is confusing. Gate the banner on a valid range (and, optionally, after full load).
Suggested fix
const hasNoFilterMatches = computed(() => {
if (!isFilterActive.value) return false
+ if (isInvalidRange.value) return false
return (
visibleTagRows.value.length === 0 &&
hiddenTagRows.value.length === 0 &&
filteredOtherMajorGroups.value.length === 0
)
})There was a problem hiding this comment.
I think it looks fine, but open to thoughts
There was a problem hiding this comment.
@serhalp, totally understood! The double message could actually help some users understand that the filter just isn't working yet—I can see the logic there. Thanks for considering it! 🙂
/\_/\
( o.o )
> ^
2 participants
Add a text input to the versions section that filters displayed versions by any valid npm semver range (e.g.
^3.0.0,>=2.0.0 <3.0.0,~1.5.0). It filters tag rows, expanded child versions, and "other versions" groups as-you-type. It shows an indication when the input is not a valid range, and a "no matches" message when nothing matches. It has a tooltip linking to a new docs page explaining npm semver ranges.npmx.package.semver.filter.v2.mp4
(This PR is stacked on #1402 at the moment.)